<template>
  <!-- 资产管理列表 -->
  <s-layout id="layout" :tabbarshow="false" navbar="normal" :title="state.title" :autoBack="true" leftIconColor="#333" :bgColor="'rgba(0,0,0,0)'" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">
    <view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff_v1/zichanguanli_bg@2.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <!-- 搜索框 -->
      <view class="SearchBox">
        <s-search-keyword :placeholder="'搜索资产'" @searchKeyWord="searchKeyWord"></s-search-keyword>
      </view>
      <scroll-view v-if="list.length > 0" scroll-y class="list_bottom" :style="{height: 'calc(68vh - 144rpx)'}" @scrolltolower='listScrolltolower'
        show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
        :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
        @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll">
        <view v-for="(item,index) of list" :key="index">
          <view class="item_box">
            <view class="item_top">
              <view class="left_title">
                <view class="title">{{ item.title }}</view>
                <view class="left_time">
                  <view class="image">
                    <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/Myinvite_icon_time@2.png`" mode="scaleToFill"/>
                  </view>
                  <view class="time">{{ item.purchase_date }}</view>
                </view>
              </view>
              <view @tap="lookDetail(item.id)">
                <view class="text">查看详情 > </view>
              </view>
            </view>
            <view class="down_boxs">
              <view class="down_box">
                <view class="down_type">类型</view>
                <view class="down_content">{{ item.category.title }}</view>
              </view>
              <view class="down_box">
                <view class="down_type">品牌</view>
                <view class="down_content">{{ item.brand }}</view>
              </view>
              <view class="down_box">
                <view class="down_type">金额</view>
                <view class="down_content">¥{{ item.price }}</view>
              </view>
              <view class="down_box">
                <view class="down_type">型号</view>
                <view class="down_content">{{ item.model }}</view>
              </view>
              <view class="down_box">
                <view class="down_type">数量</view>
                <view class="down_content">{{ item.size }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 加载中 && 没有更多数据了 -->
        <view>
          <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
        </view>
      </scroll-view>
      <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
    </view>
  </s-layout>
  <!-- 底部提交按钮 -->
  <view>
    <s-button @netWork="assetAdd" :text="'添加资产'"></s-button>
  </view>
</template>

<script setup>
  import { ref,computed  } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { baseUrl } from '@/sheep/config';
  import { formatFileSize } from '@/utils/fn.js';
  const { safeAreaInsets } = uni.getSystemInfoSync()
  const state =  ref({
    bgColor:'#fff',
    title:''
  })

  const id = ref()
  onLoad((options) => {
    id.value = options.id
    getAssteList()
  })

  const keyword = ref()
  const searchKeyWord = (e) => {
    keyword.value = e
    list.value = []
    listpagenumber.value = 1
    getAssteList()
  }

  const listpagenumber = ref(1)
  const list = ref([])
  const current_page = ref()
  const last_page = ref()
  const getAssteList = async () => {
    let params = {
      filter: JSON.stringify({
        category_id: id.value,
        title: keyword.value,
      }),
      op: JSON.stringify({
        category_id: '=',
        title: 'LIKE'
      }),
      page: listpagenumber.value,
    };
    const res = await sheep.$api.asset.getAssteList(params);
    list.value = [...list.value, ...res?.data.rows];
    current_page.value = res.data.current_page
    last_page.value = res.data.last_page
    console.log('列表',list.value);
  }

  //页面跳转
  const assetAdd = () => {
    sheep.$router.go('/subpackage/staff/workbench/assets_management/assets_management_add');
  }

  //查看详情
  const lookDetail = (e) => {
    sheep.$router.go('/subpackage/staff/workbench/assets_management/assets_management_add', {
      ids: e
    });
  }

  const loadmoreRef = ref()
  //滚动触底
  const listScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower()
    if (current_page.value < last_page.value) {
      listpagenumber.value += 1;
    } else {
      return;
    }
    getAssteList();
  };

  // 页面下拉刷新
  const freshing = ref(false)
  const triggered = ref(false)
  const isOpenRefresh = ref(true)  // 是否开启下拉
  // 自定义下拉刷新控件被下拉
  const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
  }
  // 自定义下拉刷新被触发
  const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
      listpagenumber.value = 1;
      list.value = []
      triggered.value = false;
      freshing.value = false;
      getAssteList();
    }, 500);
  }
  // 自定义下拉刷新被复位
  const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
    // console.log("onRestore");
  }
  // 自定义下拉刷新被中止
  const onAbort = () => {
    // console.log("onAbort");
  }

</script>

<style lang="scss" scoped>
  .app {
      width: 100%;
      height: auto;
  }

  ::v-deep .uni-popup__wrapper {
      flex: 1;
      width: 100vw !important;
  }

  .content {
      padding: 80rpx 40rpx 10rpx 40rpx;
      box-sizing: border-box;
      // height: 540rpx;
      width: 100%;

  .title {
      color: rgb(84, 119, 255);
      font-size: $uni-font-size-base;
      background-color: rgb(246, 248, 255);
      text-align: center;
      padding: 20rpx;
      border-radius: 10rpx;
  }

  .center {
      border-bottom: 1px solid #e5e5e5;
  }

  .text {
      color: rgb(153, 153, 153);
      font-size: $uni-font-size-base;
  }

  .bottom {
      display: flex;
      justify-content: space-between;
  }

  .btnArr {
      display: flex;
  }
  }

  .flex {
      display: flex;
  }

  .box_view {
      display: flex;

  image {
      width: 50rpx;
      height: 50rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
  }
  }

  .list_bottom {
      width: calc(100% - 40rpx);
      margin: 0 auto;
      border-radius: 20rpx;
      background-color: raba(0,0,0,0);
  }

  // 搜索框
  .SearchBox {
      width: calc(100% - 40rpx);
      height: 72rpx;
      margin: 240rpx auto 20rpx auto;
  }

  // 弹出框
  .popup_box {
      width: 100%;
      height: 50%;
      background-color: $uni-bg-color;
      border-top-right-radius: 30rpx;
      border-top-left-radius: 30rpx;
      text-align: center;

      .title {
          width: 100%;
          height: 80rpx;
          line-height: 80rpx;
          background: #efefef;
          color: #333;
          font-size: $uni-font-size-base;
          border-top-right-radius: 30rpx;
          border-top-left-radius: 30rpx;
      }

      .name {
          width: 100%;
          height: 18vh;

          .list {
              width: 100%;
              height: 80rpx;
              line-height: 80rpx;
              background-color: $uni-bg-color;
              color: #666;
              font-size: 26rpx;
          }

          .list_loading {
              width: 100%;
              height: 80rpx;
              line-height: 80rpx;
              color: #999;
              font-size: 26rpx;
              background-color: $uni-bg-color;
              border-top: 1rpx solid #efefef;
          }
      }
  }

  .loading-text {
      text-align: center;
      font-size: $uni-font-size-base;
      color: #666;
      padding: 20rpx 0;
  }

  scroll-view ::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
  }
  page {
      width: 100%;
      height: 100%;
  }

  #app {
      background-size: 100%;
      width: 100%;
      min-height: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
  }
  :deep(.u-icon__icon) {
      background: #ffffff;
      width: 64rpx;
      height: 64rpx;
      justify-content: center;
      border-radius: 50%;
  }

  .item_box {
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 20rpx;
    .item_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .left_title {
        .title {
          font-family: PingFangSC;
          color: #333333;
          font-weight: 600;
          font-size: 30rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
          margin-bottom: 20rpx;
        }
        .left_time {
          display: flex;
          align-items: center;
          margin-bottom: 30rpx;
          .image {
            width: 28rpx;
            height: 28rpx;
            margin-right: 8rpx;
            display: flex;
            align-items: center;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .time {
            font-family: PingFangSC;
            color: #0038F7;
            font-weight: 550;
            font-size: 24rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
          }
        }
      }
      .text {
        font-family: PingFangSC;
        color: #0038F7;
        font-weight: 550;
        font-size: 24rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
      }
    }
    .down_boxs {
      display: grid;
      grid-template-columns: 50% 50%;
      .down_box {
        .down_type {
          font-family: PingFangSC;
          color: #999999;
          font-weight: 500;
          font-size: 24rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
        }
        .down_content {
          font-family: PingFangSC;
          color: #333333;
          font-weight: 600;
          font-size: 28rpx;
          font-style: normal;
          text-decoration: none;
          text-align: left;
          margin: 14rpx 0 20rpx 0;
        }
      }
    }
    
  }

</style>